<template>
	<div class="right-box">
		<Breadcrumb style="margin-bottom: 5px;">
	        <BreadcrumbItem>
	            <Icon type="ios-stats" color="red" size="18"></Icon> 报表管理
	        </BreadcrumbItem>
	        <BreadcrumbItem>
	           库存清单
	        </BreadcrumbItem>
	    </Breadcrumb>
	    <Button class="addBtn">新增库存</Button>
	    <Input search enter-button="搜索" placeholder="请输入相关信息..." class="search-input" @on-search="goSearch"/>
	    <Table height="480" :columns="columns1" :data="datas"></Table>
	    <div class="page-nav">
	    	<Page :total="totalElement" show-elevator show-sizer @on-change="changePage"/>
	    </div>
	</div>
</template>

<script>
	export default{
		name:'stockList',
		data(){
			return{
				columns1: [//表头
                    {
                        title: '物品编号',
                        key: 'id'
                    },
                    {
                        title: '物品名称',
                        key: 'name'
                    },
                    {
                        title: '供应商名称',
                        key: 'suplier'
                    },
                    {
                        title: '规格/型号',
                        key: 'type'
                    },
                    {
                        title: '数量',
                        key: 'count'
                    },
                    {
                        title: '单价',
                        key: 'per'
                    },
                    {
                        title: '金额',
                        key: 'amount'
                    },
                    {
                        title: '日期',
                        key: 'date'
                    },{
                    	title:'操作',
                    	render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: {
                                        type: 'text',
                                        size: 'small'
                                    }
                                }, '查看'),
                                h('Button', {
                                    props: {
                                        type: 'text',
                                        size: 'small'
                                    }
                                }, '删除')
                            ]);
                        }
                    }
                ],
				datas:[],//表格数据
				totalElement:100,//表格总数据量
				pageSize:20,//每页显示多少条数据
				currentPage:1,//当前页码
			}
		},
		methods:{
			changePage(page){//跳页
				
			},
			goSearch(value){//搜索方法 点击搜索、或者按回车键都能触发
				alert(value)
			}
		}
	}
</script>

<style scoped>
.right-box{
	width: 100%;
	height: 100%;
	position: relative;
}
.addBtn{
	position: absolute;
	top: -10px;
	right: 20px;
}
.page-nav{
	width: 100%;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: -moz-box;
	display: flex;
	justify-content: center;
	align-content: center;
	margin-top: 10px;
}
.search-input{
	width:40%;
	position: absolute;
	top: -10px;
	left: 50%;
	transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
}
</style>